import React, { Component } from 'react';
import moment from 'moment';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledDate(current) {
  // Can not select days before today and today
  return (
    current && current < moment('2021-07-10 12:00', 'YYYY-MM-DD HH:mm')
  ); /* moment().endOf('day') */
}

function disabledDateTime() {
  return {
    disabledHours: () => range(0, 12).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

function disabledRangeTime(_, type) {
  if (type === 'start') {
    return {
      disabledHours: () => range(0, 60).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    };
  }
  return {
    disabledHours: () => range(0, 60).splice(20, 4),
    disabledMinutes: () => range(0, 31),
    disabledSeconds: () => [55, 56],
  };
}
class UserManage extends Component {
  render() {
    return (
      <div>
        <ProviderGender>
          {(props) => <List add="添加" name="商品名称列表" />}
        </ProviderGender>
        用户管理
        <Space direction="vertical" size={12}>
          <DatePicker
            format="YYYY-MM-DD HH:mm:ss"
            disabledDate={disabledDate}
            disabledTime={disabledDateTime}
            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
          />
          <DatePicker picker="month" disabledDate={disabledDate} />
          <RangePicker disabledDate={disabledDate} />
          <RangePicker
            disabledDate={disabledDate}
            disabledTime={disabledRangeTime}
            showTime={{
              hideDisabledOptions: true,
              defaultValue: [
                moment('00:00:00', 'HH:mm:ss'),
                moment('11:59:59', 'HH:mm:ss'),
              ],
            }}
            format="YYYY-MM-DD HH:mm:ss"
          />
        </Space>
      </div>
    );
  }
}
//render props模式
const ProviderGender = (props) => {
  // 判断是否是女性用户
  const isWoman = Math.random() > 0.5;
  console.log(isWoman, 'isWoman');

  if (isWoman) {
    const allProps = { add: '高阶组件增加的属性', ...props };
    return props.children(allProps);
  }
  return <div>女士专用，男士无权浏览</div>;
};
const List = ({ add, name }) => (
  <div>
    <span>{`${name}:`}</span>
    <span>{add}</span>
  </div>
);

export default UserManage;
